<template>
  <section>
    <div v-wechat-title="pageTitle" v-if="pageTitle"></div>

    <div class="flex flex-row flex-centerH pd10 top-wrapper">
      <div class="flex flex-row flex-1 flex-left">
        <div class="flex flex-row flex-center btn-back" @click="$router.back()">
          <i class="iconfont icon-houtui"/>
        </div>
      </div>

      <div class="flex flex-row flex-1 flex-right">
        <div class="flex flex-row flex-center btn-more" @click="menusWrapperVisible=true">
          <i class="iconfont icon-gengduo"/>
        </div>
      </div>
    </div>

    <template v-if="member && user">
      <div class="relative photo-wrapper">
        <img :src="member.photo_url ? member.photo_url : STATIC_BASE_URL + 'images/mp/gender.png'" ref="memberPhoto"
             class="member-photo"/>
        <div class="flex flex-row flex-centerH pb10 bottom-box">
          <div class="flex flex-row flex-1 flex-left">
            <div class="likes-box">
              <i class="iconfont icon-renqi ml10 mr5" style="color: #ff360c; font-size: 20px;"/>
              人气：{{ member.likes }}
            </div>
          </div>

          <div class="flex flex-row flex-1 flex-right flex-centerV pr10 color-gray-dark">
            <i class="iconfont icon-location"/>
            {{ member.live_city_str }}
          </div>
        </div>
      </div>

      <div class="flex flex-row bg-color-white pd10 user-info">
        <div class="flex flex-col flex-1">
          <div class="flex flex-row flex-left font-larger strong">{{ user.nick }}</div>
          <div class="flex flex-row flex-centerV flex-left">
            <i class="iconfont icon-nan" style="color: #ff89b5;" v-if="member.gender==1"></i>
            <i class="iconfont icon-nv" style="color: #ff89b5;" v-else-if="member.gender==2"></i>
            <span v-if="member.birthday > 0" class="ml5 round-badge font-common">{{ member.age }}岁</span>
            <span v-if="member.height>0" class="ml5 round-badge font-common">{{ member.height }}cm</span>
            <span v-if="member.job>0" class="ml5 round-badge font-common">{{ member.job_str }}</span>
            <span v-if="member.job_type>0" class="ml5 round-badge font-common">{{ member.job_type_str }}</span>
            <span v-if="member.annual_income>0"
                  class="ml5 round-badge font-common">{{ member.annual_income_str }}</span>
          </div>
        </div>

        <div class="flex flex-col pl10" @click="like">
          <div class="flex flex-row flex-center">
            <i class="iconfont icon-xihuan" style="font-size: 22px;"
               :style="{ color: member.liked ? '#ec3d0c' : '#aab8c2' }"/>
          </div>
          <div class="flex flex-row flex-center font-common">
            关注
          </div>
        </div>
      </div>

      <div class="pt10 pl10 pr10 clearfix member-image-wrapper" v-if="images">
        <div class="inline-block member-image-item" v-for="(image, index) in images" :key="index">
          <img :src="image.url" @click="imagePreview(index)"/>
        </div>
      </div>

      <div class="pl10 pr10">
        <div class="mt10 bg-color-white auth-info">
          <div class="flex flex-row flex-centerV pd10 base-info-title">
            <div class="flex flex-row flex-left flex-centerV flex-1 strong font-big">
              <span class="color-green mr5">◉</span>实名认证
            </div>

            <div class="flex flex-row flex-right flex-centerV flex-1 font-common color-gray-dark">
              <span @click="$router.push({name: 'Report', query: {user_id: member.user_id}})">举报</span>
            </div>
          </div>
          <div class="pl10 pr10 pb10">
            <div class="flex flex-col" v-if="member.realname_auth_status==0">
              <div class="flex flex-row flex-center">
                <van-button type="primary" round color="#20BF64" @click="sendAuthNotice">提醒对方认证</van-button>
              </div>
              <div class="flex flex-row flex-center color-red mt10 font-big">
                <i class="iconfont icon-jinggao"/>该用户还未实名认证，请谨慎交往!
              </div>
            </div>

            <div class="flex flex-col" v-else-if="member.realname_auth_status==1">
              <div class="flex flex-row flex-center">
                <van-button type="primary" round color="#20BF64" @click="$router.push({name: 'MessageSend', query: {userId: member.user_id}})">立即联系</van-button>
              </div>
              <div class="flex flex-row flex-center color-red mt10 font-big">
                <i class="iconfont icon-jinggao"/>该用户已完成实名认证，交往中请对钱财来往保持谨慎!
              </div>
            </div>

            <div class="flex flex-row flex-center mt10">
              <div class="flex flex-row flex-left flex-1 flex-centerV">
                <div class="flex flex-row flex-center circle-badge mr5 active">
                  <i class="iconfont icon-dianhua13"/>
                </div>

                <div class="flex flex-row flex-center circle-badge mr5"
                     v-bind:class="{active: member.education_auth_status==1}">
                  <i class="iconfont icon-xueli"/>
                </div>

                <div class="flex flex-row flex-center circle-badge mr5"
                     v-bind:class="{active: member.house_auth_status==1}">
                  <i class="iconfont icon-fangzi"/>
                </div>

                <div class="flex flex-row flex-center circle-badge mr5"
                     v-bind:class="{active: member.car_auth_status==1}">
                  <i class="iconfont icon-chezi"/>
                </div>

                <div class="flex flex-row flex-center circle-badge mr5"
                     v-bind:class="{active: member.marriage_auth_status==1}">
                  <i class="iconfont icon-jiehun1"/>
                </div>

                <div class="flex flex-row flex-center circle-badge mr5"
                     v-bind:class="{active: member.wxid_auth_status==1}">
                  <i class="iconfont icon-weixin"/>
                </div>
              </div>

              <div class="flex flex-row flex-right flex-1 flex-centerV" @click="authPopupVisible=true">
                <i class="iconfont icon-tishi color-gray-dark"/><span class="color-gray-dark font-common">点亮的为已认证</span>
              </div>
            </div>
          </div>
        </div>

        <div class="mt10 bg-color-white base-info">
          <div class="flex flex-row flex-centerV pd10 base-info-title">
            <div class="flex flex-row flex-left flex-centerV flex-1 strong font-big">
              <span class="color-green mr5">◉</span>基本资料
            </div>

            <!--          <div class="flex flex-row flex-right flex-centerV flex-1">-->
            <!--            <i class="iconfont icon-right-arrow" />-->
            <!--          </div>-->
          </div>
          <div class="pl10 pr10 pb10">
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.live_city_str">所在地：{{ member.live_city_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.birth_city_str">户籍地：{{ member.birth_city_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.height > 0">身高：{{ member.height }}cm</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.weight > 0">体重：{{ member.weight }}KG</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.marriage_status > 0">{{ member.marriage_status_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.constellation > -1">{{ member.constellation_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.zodiac > -1">{{ member.zodiac_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.education > 0">{{ member.education_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.car_status > 0">{{ member.car_status_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.house_status > 0">{{ member.house_status_str }}<span
              v-if="member.house_location>0">({{ member.house_location_str }})</span></span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.kids > 0">孩子：{{ member.kids_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.nation > 0">{{ member.nation_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.blood_type > 0">血型：{{ member.blood_type_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.faith > 0">宗教信仰：{{ member.faith_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.smoke_status > 0">吸烟：{{ member.smoke_status_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.drink_status > 0">喝酒：{{ member.drink_status_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.distance_relationship_type>0">异地恋：{{ member.distance_relationship_type_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.child_type>0">生孩子：{{ member.child_type_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.live_parents_type>0">与父母同住：{{ member.live_parents_type_str }}</span>
          </div>
        </div>

        <div class="mt10 bg-color-white expect-info">
          <div class="flex flex-row flex-centerV pd10 base-info-title">
            <div class="flex flex-row flex-left flex-centerV flex-1 strong font-big">
              <span class="color-green mr5">◉</span>择偶要求
            </div>

            <!--          <div class="flex flex-row flex-right flex-centerV flex-1">-->
            <!--            <i class="iconfont icon-right-arrow" />-->
            <!--          </div>-->
          </div>
          <div class="pl10 pr10 pb10">
            <span class="mr5 mb5 round-badge font-common">年龄：<span
              v-if="member.expect_age_from==0 && member.expect_age_to==0">不限</span><span
              v-else>{{ member.expect_age_from > 0 ? member.expect_age_from + '岁' : '不限' }} - {{ member.expect_age_to > 0 ? member.expect_age_to + '岁' : '不限' }}</span></span>
            <span class="mr5 mb5 round-badge font-common">身高：<span
              v-if="member.expect_height_from==0 && member.expect_height_to==0">不限</span><span
              v-else>{{ member.expect_height_from > 0 ? member.expect_height_from + 'cm' : '不限' }} - {{ member.expect_height_to > 0 ? member.expect_height_to + 'cm' : '不限' }}</span></span>
            <span class="mr5 mb5 round-badge font-common">体重：<span
              v-if="member.expect_weight_from==0 && member.expect_weight_to==0">不限</span><span
              v-else>{{ member.expect_weight_from > 0 ? member.expect_weight_from + 'KG' : '不限' }} - {{ member.expect_weight_to > 0 ? member.expect_weight_to + 'KG' : '不限' }}</span></span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.expect_marriage_status.length > 0">婚况：<span
              v-for="(item, index) in member.expect_marriage_status_str" :key="index"
              class="mr5">{{ item }}</span></span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.expect_location>0">所在地：{{ member.expect_location_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.expect_house_status>0">房产：{{ member.expect_house_status_str }}<span
              v-if="member.expect_house_location>0">({{ member.expect_house_location_str }})</span></span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.expect_kids_status>0">孩子：{{ member.expect_kids_status_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.expect_education_type>0">学历：{{ member.expect_education_type_str }}</span>
            <span class="mr5 mb5 round-badge font-common"
                  v-if="member.expect_income_type>0">收入：{{ member.expect_income_type_str }}</span>
            <span class="mr5 mb5 round-badge font-common" v-if="member.expect_verify_status == 1">实名认证</span>
          </div>
        </div>

        <div class="mt10 bg-color-white intro-info" v-if="member.intro">
          <div class="flex flex-row flex-centerV pd10 base-info-title">
            <div class="flex flex-row flex-left flex-centerV flex-1 strong font-big">
              <span class="color-green mr5">◉</span>简介
            </div>

            <!--          <div class="flex flex-row flex-right flex-centerV flex-1">-->
            <!--            <i class="iconfont icon-right-arrow" />-->
            <!--          </div>-->
          </div>
          <div class="pl10 pr10 pb10 font-common">
            {{ member.intro }}
          </div>
        </div>

        <div class="mt10 bg-color-white vip-info flex flex-row flex-center pd10">
          <div class="flex flex-row flex-center pr10" v-if="logined.user && logined.user.avatar_url">
            <img :src="logined.user.avatar_url" class="vip-info-user-avatar"/>
          </div>

          <div class="flex flex-col flex-1">
            <div class="flex flex-row flex-left font-big color-orange strong">
              您的当前等级：{{ logined.member ? logined.member.vip_level_str : '普通会员' }}
            </div>
            <div class="flex flex-row flex-left font-common mt10">
              升级会员等级，获得更多权益，快速脱单~~
            </div>
          </div>

          <div class="flex flex-row flex-center pl10">
            <van-button type="warning" round size="small" @click="$router.push({name: 'VipBuy'})">马上升级</van-button>
          </div>
        </div>

        <div class="mt10 bg-color-white contact-info flex flex-row flex-center pd10">
          <div class="flex flex-row flex-center pr10">
            <div class="flex flex-row flex-center photo-icon-wrapper">
              <i class="iconfont icon-dianhua13" style="font-size: 22px; color: #FFFFFF;"/>
            </div>
          </div>

          <div class="flex flex-col flex-1">
            <div class="flex flex-row flex-left font-big color-orange strong">
              该会员的联系方式已完善
            </div>
            <div class="flex flex-row flex-left font-common mt10">
              点击按钮联系TA
            </div>
          </div>

          <div class="flex flex-row flex-center pl10">
            <van-button type="warning" round size="small" @click="unlockPhoneNumber">马上联系</van-button>
          </div>
        </div>

        <div class="mt10 service-info flex flex-row flex-center pd10">
          <div class="flex flex-row flex-center pr10">
            <div class="flex flex-row flex-center service-icon-wrapper">
              <i class="iconfont icon-kefu1" style="font-size: 26px; color: #FFFFFF;"/>
            </div>
          </div>

          <div class="flex flex-col flex-1">
            <div class="flex flex-row flex-left font-big color-orange strong">
              对TA心动吗？
            </div>
            <div class="flex flex-row flex-left font-common mt10">
              您可以联系客服帮您牵线
            </div>
          </div>

          <div class="flex flex-row flex-center pl10">
            <van-button type="warning" round color="#ff4400" size="small" @click="servicePopupVisible=true">联系客服
            </van-button>
          </div>
        </div>
      </div>

      <div class="empty-box mt10"></div>

      <!--      <div class="pt10 pb10 font-common flex flex-row flex-center sub-msg-wrapper" v-if="subMsgWrapperVisible">-->
      <!--        <div class="flex flex-row flex-center mr5">有与您匹配的有缘人注册时给您发送消息</div>-->
      <!--        <div class="flex flex-row flex-center">-->
      <!--          <div>-->
      <!--            <wx-open-subscribe :template="subMsgTemplates"-->
      <!--                               id="subscribe-btn"-->
      <!--                               @success="subBtnSuccess"-->
      <!--                               @error="subBtnError">-->
      <!--              <script type="text/wxtag-template" slot="style">-->
      <!--                <style>-->
      <!--                  .subscribe-btn {-->
      <!--                    color: #fff;-->
      <!--                    background-color: #07c160;-->
      <!--                    padding: 5px 5px;-->
      <!--                    border: none;-->
      <!--                    border-radius: 4px;-->
      <!--                  }-->
      <!--                </style>-->
      <!--              </script>-->
      <!--              <script type="text/wxtag-template">-->
      <!--                <button class="subscribe-btn">订阅通知</button>-->
      <!--              </script>-->
      <!--            </wx-open-subscribe>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->

      <div class="flex flex-row flex-center bg-color-white bottom-wrapper">
        <div class="flex flex-col flex-centerH pl20 pr20 color-green item" @click="like">
          <div class="flex flex-row flex-center">
            <i class="iconfont icon-xihuan" :style="{ color: member.liked ? '#ec3d0c' : '#13ca87' }"/>
          </div>

          <div class="flex flex-row flex-center font-common" :style="{ color: member.liked ? '#ec3d0c' : '#13ca87' }">
            关注
          </div>
        </div>

        <div class="flex flex-col flex-centerH pl20 pr20 color-green item" @click="unlockWxId">
          <div class="flex flex-row flex-center">
            <i class="iconfont icon-weixin"/>
          </div>

          <div class="flex flex-row flex-center font-common">
            加微信
          </div>
        </div>

        <div class="flex flex-col flex-centerH pl20 pr20 color-pink item" @click="servicePopupVisible=true">
          <div class="flex flex-row flex-center">
            <i class="iconfont icon-hongniang-copy"/>
          </div>

          <div class="flex flex-row flex-center font-common">
            红娘服务
          </div>
        </div>

        <div class="flex flex-row flex-center flex-1 color-white bg-color-green item"
             @click="$router.push({name: 'MessageSend', query: {userId: member.user_id}})">
          <i class="iconfont icon-xiaoxi mr10"/>聊天
        </div>

      </div>
    </template>

    <van-popup v-model="authPopupVisible" :style="{ width: '80%' }">
      <div class="text-center font-biger strong mt20">
        认证详情
      </div>

      <div class="text-center font-big mt10">
        图标点亮的为已通过审核认证的信息
      </div>

      <div class="flex flex-col pd10 auth-popup">
        <div class="flex flex-row">
          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.realname_auth_status==1}">
              <i class="iconfont icon-credentials_icon"/>
            </div>
            <span class="font-common" v-if="member && member.realname_auth_status==1">已实名认证</span>
            <span class="font-common" v-else>未实名认证</span>
          </div>

          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5 active">
              <i class="iconfont icon-dianhua13"/>
            </div>
            <span class="font-common">手机已认证</span>
          </div>
        </div>

        <div class="flex flex-row mt10">
          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.education_auth_status==1}">
              <i class="iconfont icon-xueli"/>
            </div>
            <span class="font-common" v-if="member && member.education_auth_status==1">学历已认证</span>
            <span class="font-common" v-else>学历未认证</span>
          </div>

          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.house_auth_status==1}">
              <i class="iconfont icon-fangzi"/>
            </div>
            <span class="font-common" v-if="member && member.house_auth_status==1">房产已认证</span>
            <span class="font-common" v-else>房产未认证</span>
          </div>
        </div>

        <div class="flex flex-row mt10">
          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.car_auth_status==1}">
              <i class="iconfont icon-chezi"/>
            </div>
            <span class="font-common" v-if="member && member.car_auth_status==1">汽车已认证</span>
            <span class="font-common" v-else>汽车未认证</span>
          </div>

          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.marriage_auth_status==1}">
              <i class="iconfont icon-jiehun1"/>
            </div>
            <span class="font-common" v-if="member && member.marriage_auth_status==1">婚况已认证</span>
            <span class="font-common" v-else>婚况未认证</span>
          </div>
        </div>

        <div class="flex flex-row mt10">
          <div class="flex flex-row flex-centerV flex-1 flex-left">
            <div class="flex flex-row flex-center circle-badge mr5"
                 v-bind:class="{active: member && member.wxid_auth_status==1}">
              <i class="iconfont icon-weixin"/>
            </div>
            <span class="font-common" v-if="member && member.wxid_auth_status==1">微信号已填写</span>
            <span class="font-common" v-else>微信号未填写</span>
          </div>

          <div class="flex flex-row flex-centerV flex-1 flex-left">

          </div>
        </div>
      </div>

    </van-popup>

    <van-popup v-model="contactPopupVisible" :style="{ width: '80%' }"></van-popup>

    <van-popup v-model="servicePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        {{ APP_NAME }}客服
      </div>

      <div class="text-center mt10">
        <img :src="serviceWxQrCode" height="200" width="200"/>
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码添加客服为您牵线
      </div>
    </van-popup>

    <van-popup v-model="wxidPopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10 strong">
        微信号
      </div>

      <div class="flex flex-row flex-center mt10">
        <span class="mr5">{{ wxid }}</span>
      </div>

      <div class="text-center pd10">
        <van-button round block type="primary" @click="copyWxId">复 制</van-button>
      </div>
    </van-popup>

    <van-overlay :show="viewWxIdRechargeOverlayVisible">
      <div class="flex flex-col flex-center recharge-wrapper" style="height: 100%;">
        <div class="flex flex-col pd20 round-box bg-color-white recharge-box">
          <div class="flex flex-row flex-center strong font-biger">
            解锁微信号<span class="font-common color-gray-dark ml10">(<span
            class="color-red">{{ unlockWxIdPrice }}</span>)金币</span>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-viphuiyuanhuangguan" style="font-size: 26px;color: #ff0000;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">VIP特权</div>
              <div class="flex flex-row flex-left color-gray font-common">免费查看微信号</div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button type="warning" round size="small" @click="$router.push({name: 'VipBuy'})">马上升级</van-button>
            </div>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-taojinbi" style="font-size: 26px;color: #9266f9;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">金币支付</div>
              <div class="flex flex-row flex-left color-gray font-common">当前可用金币：<span
                class="color-green">{{ logined.user && logined.user.gold_coin ? logined.user.gold_coin : 0 }}</span>
              </div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button
                type="warning"
                round
                size="small"
                :disabled="logined.user && logined.user.gold_coin >= unlockWxIdPrice ? false : true"
                @click="onCreateUnlockWxIdOrderUseGoldCoin">立即解锁
              </van-button>
            </div>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-weixinzhifu" style="font-size: 26px;color: #16c2c2;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">在线支付</div>
              <div class="flex flex-row flex-left color-gray font-common">畅享微信聊天乐趣</div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button type="warning" round size="small" @click="onCreateUnlockWxIdOrder">立即支付</van-button>
            </div>
          </div>

        </div>

        <div class="flex flex-row flex-center pd20">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;"
             @click="viewWxIdRechargeOverlayVisible=false"/>
        </div>
      </div>
    </van-overlay>

    <van-popup v-model="phoneNumberPopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10 strong">
        手机号
      </div>

      <div class="flex flex-row flex-center mt10">
        <span class="mr5">{{ phoneNumber }}</span>
      </div>

      <div class="text-center pd10">
        <van-button round block type="primary" @click="copyPhoneNumber">复 制</van-button>
      </div>
    </van-popup>

    <van-overlay :show="phoneNumberRechargeOverlayVisible">
      <div class="flex flex-col flex-center recharge-wrapper" style="height: 100%;">
        <div class="flex flex-col pd20 round-box bg-color-white recharge-box">
          <div class="flex flex-row flex-center strong font-biger">
            解锁手机号<span class="font-common color-gray-dark ml10">(<span
            class="color-red">{{ unlockPhoneNumberPrice }}</span>)金币</span>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-viphuiyuanhuangguan" style="font-size: 26px;color: #ff0000;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">VIP特权</div>
              <div class="flex flex-row flex-left color-gray font-common">免费查看手机号</div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button type="warning" round size="small" @click="$router.push({name: 'VipBuy'})">马上升级</van-button>
            </div>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-taojinbi" style="font-size: 26px;color: #9266f9;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">金币支付</div>
              <div class="flex flex-row flex-left color-gray font-common">当前可用金币：<span
                class="color-green">{{ logined.user && logined.user.gold_coin ? logined.user.gold_coin : 0 }}</span>
              </div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button type="warning"
                          round size="small"
                          :disabled="logined.user && logined.user.gold_coin >= unlockPhoneNumberPrice ? false : true"
                          @click="onCreateUnlockPhoneNumberOrderUseGoldCoin">立即解锁
              </van-button>
            </div>
          </div>

          <div class="flex flex-row flex-center mt20">
            <div class="flex flex-row flex-center pr10">
              <i class="iconfont icon-weixinzhifu" style="font-size: 26px;color: #16c2c2;"/>
            </div>

            <div class="flex flex-col flex-centerH flex-1">
              <div class="flex flex-row flex-left strong font-biger">在线支付</div>
              <div class="flex flex-row flex-left color-gray font-common">畅享通话乐趣</div>
            </div>

            <div class="flex flex-row flex-center pl10">
              <van-button type="warning" round size="small" @click="onCreateUnlockPhoneNumberOrder">立即支付</van-button>
            </div>
          </div>

        </div>

        <div class="flex flex-row flex-center pd20">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;"
             @click="phoneNumberRechargeOverlayVisible=false"/>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="sharePosterPopupVisible">
      <div class="flex flex-col flex-center" style="height: 100%;">
        <div class="flex flex-col pd10 bg-color-white round-box" style="width: 60%;">
          <div class="flex flex-row flex-center">
            <img :src="sharePosterImg" class="w100" v-if="sharePosterImg"/>
            <van-empty
              class="custom-image"
              :image="STATIC_BASE_URL + 'images/mp/loading.gif'"
              v-else
            />
          </div>
          <div class="flex flex-row flex-center text-center mt5 font-common">长按图片发给好友或保存到本地后发到朋友圈</div>
        </div>

        <div class="flex flex-row flex-center pd10">
          <i class="iconfont icon-guanbi" style="font-size: 34px; color: #FFFFFF;"
             @click="sharePosterPopupVisible=false"/>
        </div>
      </div>
    </van-overlay>

    <div class="flex flex-col flex-center sidebar-matchmaking" @click="showSharePosterPopup">
      <div class="flex flex-row flex-center">
        <i class="iconfont icon-qiapian"/>
      </div>
      <div class="flex flex-row flex-center font-small">相亲卡</div>
    </div>

    <MenusWrapper @close="onMenusWrapperClose" v-if="menusWrapperVisible"/>
  </section>
</template>

<script>
import Vue from 'vue';
import {Toast, Dialog, ImagePreview} from 'vant';
import MenusWrapper from "../componets/MenusWrapper";
import {
  STATIC_BASE_URL,
  memberProfileUri,
  wechatJsApiConfigUri,
  memberLikeUri,
  memberViewWxIdUri,
  wxPayServiceChargeOrderPayTradeUri,
  wxPayQueryUri,
  memberUnlockPhoneUri,
  serviceChargeOrderCreateUri,
  memberSharePosterUri,
  chatMessageSendAuthNoticeUri, memberVipLevelsUri
} from '../../common/api';
import {IID_TYPE_UNLOCK_MEMBER_PHONE, IID_TYPE_UNLOCK_MEMBER_WXID} from '../../common/constants';
import {
  ERROR_SHORT_VIEW_WXID_AMOUNT,
  ERROR_VIEW_WXID_WAIT_AUDIT,
  ERROR_SHORT_VIEW_PHONE_NUMBER,
  ERROR_VIEW_PHONE_WAIT_AUDIT
} from '../../common/error';
import VueClipboard from 'vue-clipboard2';
import util from "../../assets/js/util";

Vue.use(Toast).use(Dialog).use(ImagePreview);
const serviceWxQrCode = STATIC_BASE_URL + 'images/mp/service-wx.jpg';
const logo = require('../../assets/images/logo.jpg');
let wxReady = false;

export default {
  components: {
    MenusWrapper,
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      STATIC_BASE_URL: STATIC_BASE_URL,
      APP_NAME: APP_NAME,
      menusWrapperVisible: false,
      pageTitle: null,
      wxReady: false,
      member: null,
      images: null,
      user: null,
      logined: {
        member: null,
        user: null
      },
      logo: logo,
      serviceWxQrCode: serviceWxQrCode,
      contactPopupVisible: false,
      servicePopupVisible: false,
      authPopupVisible: false,
      wxidPopupVisible: false,
      wxid: '',
      viewWxIdRechargeOverlayVisible: false,
      phoneNumber: '',
      phoneNumberRechargeOverlayVisible: false,
      phoneNumberPopupVisible: false,
      siteConfig: null,
      unlockType: '',
      sharePosterPopupVisible: false,
      sharePosterImg: null,
      subMsgTemplates: '',
      subMsgWrapperVisible: false,
      vipLevels: [],
      unlockWxIdPrice: 0.00,
      unlockPhoneNumberPrice: 0.00
    }
  },
  methods: {
    imagePreview(index) {
      let images = [];
      for (let i = 0; i < this.images.length; i++) {
        images.push(this.images[i].url);
      }
      ImagePreview({
        images: images,
        startPosition: index,
        closeable: true
      });
    },
    unlockPhoneNumber() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      if (this.member.phone_auth_status == 0 || this.member.hidden_mobile_enable == 1) {
        Dialog.alert({
          message: '该用户禁止查看手机号',
        }).then(() => {
          // on close
        });
      } else {
        const that = this;
        const url = memberUnlockPhoneUri + '?member_id=' + this.$route.query.id;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            if (code == ERROR_SHORT_VIEW_PHONE_NUMBER) {
              that.phoneNumberRechargeOverlayVisible = true;
            } else if (code == ERROR_VIEW_PHONE_WAIT_AUDIT) {
              Dialog.alert({
                message: '请等待该用户同意您的请求\n若该用户拒绝您的申请，我们将退还您支付的金币或款项',
              }).then(() => {
                // on close
              });
            } else {
              that.toast(msg);
            }
          } else {
            that.phoneNumber = data.phone_number;
            that.phoneNumberPopupVisible = true;
          }
        }, response => {
          // error callback
        })
      }
    },
    unlockWxId() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      if (this.member.wxid_auth_status == 0) {
        Dialog.alert({
          message: '该用户禁止查看微信号',
        }).then(() => {
          // on close
        });
      } else {
        const that = this;
        const url = memberViewWxIdUri + '?member_id=' + this.$route.query.id;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            if (code == ERROR_SHORT_VIEW_WXID_AMOUNT) {
              that.viewWxIdRechargeOverlayVisible = true;
            } else if (code == ERROR_VIEW_WXID_WAIT_AUDIT) {
              Dialog.alert({
                message: '请等待该用户同意您的请求\n若该用户拒绝您的申请，我们将退还您支付的金币或款项',
              }).then(() => {
                // on close
              });
            } else {
              that.toast(msg);
            }
          } else {
            that.wxid = data.wxid;
            that.wxidPopupVisible = true;
          }
        }, response => {
          // error callback
        })
      }
    },
    copyWxId() {
      this.$copyText(this.wxid).then(
        res => {
          Toast('复制成功');
          this.wxidPopupVisible = false;
        },
        err => {
          Toast("复制失败");
        }
      )
    },
    copyPhoneNumber() {
      this.$copyText(this.phoneNumber).then(
        res => {
          Toast('复制成功');
          this.phoneNumberPopupVisible = false;
        },
        err => {
          Toast("复制失败");
        }
      )
    },
    onCreateUnlockWxIdOrderUseGoldCoin() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const fromuid = localStorage.getItem('fromuid') ? localStorage.getItem('fromuid') : 0;

      const url = serviceChargeOrderCreateUri + '?fromuid=' + fromuid + '&iid=' + this.$route.query.id
        + '&iid_type=' + IID_TYPE_UNLOCK_MEMBER_WXID + '&money_type=gold_coin';
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.viewWxIdRechargeOverlayVisible = false;
          that.unlockWxId();
        }
      }, response => {
        // error callback
      })
    },
    onCreateUnlockWxIdOrder() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const fromuid = localStorage.getItem('fromuid') ? localStorage.getItem('fromuid') : 0;

      const url = serviceChargeOrderCreateUri + '?fromuid=' + fromuid + '&iid=' + this.$route.query.id
        + '&iid_type=' + IID_TYPE_UNLOCK_MEMBER_WXID;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.unlockType = 'wxid';
          that.viewWxIdRechargeOverlayVisible = false;
          that.chooseWXPay(data.order_sn);
        }
      }, response => {
        // error callback
      })
    },
    onCreateUnlockPhoneNumberOrderUseGoldCoin() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const fromuid = localStorage.getItem('fromuid') ? localStorage.getItem('fromuid') : 0;

      const url = serviceChargeOrderCreateUri + '?fromuid=' + fromuid + '&iid=' + this.$route.query.id
        + '&iid_type=' + IID_TYPE_UNLOCK_MEMBER_PHONE + '&money_type=gold_coin';
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.phoneNumberRechargeOverlayVisible = false;
          that.unlockPhoneNumber();
        }
      }, response => {
        // error callback
      })
    },
    onCreateUnlockPhoneNumberOrder() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const fromuid = localStorage.getItem('fromuid') ? localStorage.getItem('fromuid') : 0;

      const url = serviceChargeOrderCreateUri + '?fromuid=' + fromuid + '&iid=' + this.$route.query.id
        + '&iid_type=' + IID_TYPE_UNLOCK_MEMBER_PHONE;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.unlockType = 'phone';
          that.phoneNumberRechargeOverlayVisible = false;
          that.chooseWXPay(data.order_sn);
        }
      }, response => {
        // error callback
      })
    },
    chooseWXPay(orderSn) {
      const that = this;
      const url = wxPayServiceChargeOrderPayTradeUri + '?order_sn=' + orderSn;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          const payParams = JSON.parse(data.pay_params);
          wx.chooseWXPay({
            timestamp: payParams.timeStamp,
            nonceStr: payParams.nonceStr,
            package: payParams.package,
            signType: payParams.signType,
            paySign: payParams.paySign,
            success: function (res) {
              // 支付成功后的回调函数
              that.onPaied(orderSn, data.pay_trade_no);
            },
            fail: function (res) {
              that.toast('支付失败');
            }
          });
        }
      }, response => {
        // error callback
      });
    },
    onPaied(orderSn, payTradeNo) {
      const that = this;
      const url = wxPayQueryUri + '?pay_trade_no=' + payTradeNo;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          if (data.success == 1) {
            that.toast('购买成功');
            that.onPaySuccess();
          } else {
            that.toast('支付出错，请重试或联系客服付款');
          }
        }
      }, response => {
        // error callback
      })
    },
    onPaySuccess() {
      if (this.unlockType == 'wxid') {
        this.unlockWxId();
      } else if (this.unlockType == 'phone') {
        this.unlockPhoneNumber();
      }
    },
    sendAuthNotice() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const formData = {
        to_uid: this.user.id
      };
      that.$http.post(chatMessageSendAuthNoticeUri, formData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast(msg)
        } else {
          that.toast('提醒发送成功');
        }
      }, response => {
        that.toast('发生错误');
      })
    },
    requestData() {
      const that = this;
      const url = memberProfileUri + '?id=' + this.$route.query.id + '&from=member_profile';
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          if (data.images.length > 0) {
            that.images = data.images;
          }
          that.member = data.member;
          that.user = data.user;
          that.pageTitle = data.user.nick + '-急寻有缘人共度余生';
          that.updateShareData();
        }
      }, response => {
        // error callback
      })
    },
    like() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      const that = this;
      const url = memberLikeUri + '?member_id=' + this.$route.query.id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.member = data.member;
        }
      }, response => {
        // error callback
      })
    },
    onMenusWrapperClose() {
      this.menusWrapperVisible = false;
    },
    getJsApiConfig() {
      if (!isWxServiceEnable) {
        return;
      }
      const that = this;
      const url = wechatJsApiConfigUri + '?url=' + encodeURIComponent(window.location.href);
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            openTagList: ['wx-open-subscribe'],
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'showMenuItems', 'scanQRCode', 'chooseWXPay'] // 必填，需要使用的JS接口列表
          });

          wx.ready(function () {
            that.wxReady = true;
            console.log('wx配置成功');
            that.updateShareData();
          });

          wx.error(function (res) {
            console.log('wx配置出错');
          });
        }
      }, response => {
        // error callback
      })
    },
    updateShareData() {
      if (this.wxReady && this.member) {
        let desc = this.member.age + '岁';
        if (this.member.live_city_str) {
          desc += ' ' + this.member.live_city_str;
        }
        if (this.member.house_status == 20) {
          desc += ' 有房';
        }
        if (this.member.car_status == 20) {
          desc += ' 有车';
        }

        const imgUrl = this.member.photo_url ? this.member.photo_url : STATIC_BASE_URL + 'images/mp/gender.png';
        // const link = window.location.protocol + window.location.hostname + BASE_PATH + 'member_profile?id=' + this.$route.query.id;
        const link = window.location.href;

        wx.updateAppMessageShareData({
          title: this.pageTitle, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 设置成功
            console.log('updateAppMessageShareData');
          }
        });

        wx.updateTimelineShareData({
          title: this.pageTitle, // 分享标题
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 设置成功
            console.log('updateTimelineShareData');
          }
        })
      }
    },
    showSharePosterPopup() {
      if (!this.GLOBAL.userInfo) {
        this.$router.push({name: 'UserLogin'});
        return;
      }
      this.sharePosterPopupVisible = true;
      const fromuid = this.GLOBAL.userInfo.id;
      const that = this;
      const url = memberSharePosterUri + '?member_id=' + this.$route.query.id + '&fromuid=' + fromuid;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.sharePosterImg = data.url;
        }
      }, response => {
        // error callback
      });
    },
    subBtnSuccess() {
      this.subMsgWrapperVisible = false;
    },
    subBtnError() {
      this.subMsgWrapperVisible = false;
    },
    initSubMsgTemplates() {
      if (!isWxServiceEnable) {
        return;
      }
      let templates = [
        this.siteConfig.subscribe_template.marriage_person_notice,
        this.siteConfig.subscribe_template.new_view_notice,
        this.siteConfig.subscribe_template.liked_remind,
        this.siteConfig.subscribe_template.new_msg_remind,
        this.siteConfig.subscribe_template.sign_in_remind,
      ];
      this.subMsgTemplates = templates.join(',');
      this.subMsgWrapperVisible = true;
    },
    getVipLevels() {
      const that = this;
      const url = memberVipLevelsUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          let vipLevels = data.vip_levels;
          that.vipLevels = vipLevels;
          if(that.GLOBAL.memberProfile) {
            for (const key in vipLevels) {
              if(vipLevels[key].value == that.GLOBAL.memberProfile.vip_level) {
                that.unlockWxIdPrice = vipLevels[key].rights.items.unlock_wxid_price;
                that.unlockPhoneNumberPrice = vipLevels[key].rights.items.unlock_phone_price;
                break;
              }
            }
          }
        }
      }, response => {
        // error callback
      })
    },
  },
  created: function () {
    const fromuid = window.localStorage.getItem('user_id') ? window.localStorage.getItem('user_id') : 0;
    let _href = window.location.href;
    if (isWxServiceEnable && _href.indexOf('&replace=1') <= -1) {
      window.location.replace(_href + '&replace=1&fromuid=' + fromuid)
    } else if (_href.indexOf('fromuid=') > -1) {
      const fromuidVar = util.getQueryVariable('fromuid');
      if (fromuid > 0 && fromuid != fromuidVar) {
        window.location.replace(_href.replace('fromuid=' + fromuidVar, 'fromuid=' + fromuid));
      }
    }
  },
  mounted: function () {
    if (this.GLOBAL.userInfo) {
      this.logined.user = this.GLOBAL.userInfo;
      this.logined.member = this.GLOBAL.memberProfile;
    }
    if (this.GLOBAL.siteConfig) {
      this.siteConfig = this.GLOBAL.siteConfig;
      this.initSubMsgTemplates();
    }
    this.EventBus.$on('OnUserLogined', () => {
      this.logined.user = this.GLOBAL.userInfo;
      this.logined.member = this.GLOBAL.memberProfile;
      const vipLevels = this.vipLevels;
      if(this.GLOBAL.memberProfile) {
        for (const key in vipLevels) {
          if(vipLevels[key].value == this.GLOBAL.memberProfile.vip_level) {
            this.unlockWxIdPrice = vipLevels[key].rights.items.unlock_wxid_price;
            this.unlockPhoneNumberPrice = vipLevels[key].rights.items.unlock_phone_price;
            break;
          }
        }
      }

      this.requestData();
    });
    this.EventBus.$on('OnSiteConfigLoaded', () => {
      this.siteConfig = this.GLOBAL.siteConfig;
      this.initSubMsgTemplates();
    });
    this.getJsApiConfig();
    this.requestData();
    this.getVipLevels();
  }
}
</script>

<style scoped>
.photo-wrapper {
  height: 400px;
  overflow: hidden;
}

.member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-wrapper .bottom-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.photo-wrapper .bottom-box .likes-box {
  background-color: rgba(0, 0, 0, 0.6);
  height: 40px;
  line-height: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-right: 15px;
  color: #ffffff;
}

.user-info {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.auth-info, .base-info, .expect-info, .intro-info, .vip-info, .contact-info, .service-info {
  border-radius: 8px;
}

.round-badge {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 5px 5px;
}

.vip-info .vip-info-user-avatar {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}

.contact-info .photo-icon-wrapper, .service-info .service-icon-wrapper {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: #ff976a;
}

.service-info {
  background: #ffeef2;
}

.service-info .service-icon-wrapper {
  background: #ff4400;
}

.auth-info .circle-badge, .auth-popup .circle-badge {
  height: 26px;
  width: 26px;
  border-radius: 13px;
  background: #e0e0e0;
  color: #FFFFFF;
}

.auth-info .circle-badge.active, .auth-popup .circle-badge.active {
  background: #25bdd6;
}

.top-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.top-wrapper .btn-back, .top-wrapper .btn-more {
  background-color: rgba(0, 0, 0, 0.4);
  height: 40px;
  width: 40px;
  border-radius: 20px;
  color: #ffffff;
}

.empty-box {
  height: calc(50px + env(safe-area-inset-bottom));
}

.sub-msg-wrapper {
  position: fixed;
  bottom: calc(50px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
}

.bottom-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.bottom-wrapper .item {
  height: 50px;
}

.bottom-wrapper .item .iconfont {
  font-size: 20px;
}

.recharge-box {
  width: 80%;
}

.member-image-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  height: 60px;
}

.member-image-wrapper .member-image-item {
  float: left;
  height: 60px;
  width: 60px;
  margin-right: 10px;
}

.member-image-wrapper .member-image-item img {
  height: 100%;
  width: 100%;
}

.sidebar-matchmaking {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  top: 200px;
  right: 5px;
  position: fixed;
  background: #ff6eec;
  color: #FFFFFF;
}

.sidebar-matchmaking .iconfont {
  font-size: 20px;
}

.custom-image .van-empty__image {
  width: 100px;
  height: 100px;
}
</style>
